<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                /* outline: 1px solid red; */
            }
            img {
                max-width: 100%;
            }
        </style>
        <style>
            .box {
                margin: 20px;
            }
        </style>
        <style>
            .demo {
                background-color: #ffc67d;
                border: 1px solid #666;
                min-height: 100px;
            }
            .sider {
                width: 200px;
                background-color: #e8b7ff;
            }
            .header {
                min-height: 100px;
                background-color: #eba4a0;
            }
            .content {
                min-height: 100px;
                background-color: #9bb0e8;
            }
            .footer {
                min-height: 100px;
                background-color: #ffc67d;
            }
            #app {
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">

            <h3>layout</h3>
            <div class="box">
                <gulu-row>
                    <gulu-col span="24" :narrow-pc="{span: 8}">
                        <div class="demo"></div>
                    </gulu-col>
                    <gulu-col span="24" :narrow-pc="{span: 8}">
                        <div class="demo"></div>
                    </gulu-col>
                    <gulu-col span="24" :narrow-pc="{span: 8}">
                        <div class="demo"></div>
                    </gulu-col>
                    <gulu-col span="24" :narrow-pc="{span: 8}">
                        <div class="demo"></div>
                    </gulu-col>
                </gulu-row>
            </div>

            <h3>快速布局</h3>
            <div class="box">
                <gulu-layout>
                    <gulu-header class="header">
                        header 其他没有示意
                    </gulu-header>
                </gulu-layout>
            </div>


            <h3>popover</h3>
            <div class="box" style="overflow: hidden;">
                <gulu-popover>
                    <template slot="content">
                        <div>哈哈哈哈</div>
                    </template>
                    <button>点我</button>
                </gulu-popover>
                <gulu-popover>
                    <template slot="content">
                        <div>哈哈哈哈</div>
                    </template>
                    <button>点我</button>
                </gulu-popover>
            </div>
        </div>

        <script src="./src/main.js"></script>
        <script src="//at.alicdn.com/t/font_1624032_2ur8x4mh3hm.js"></script>
    </body>
</html>
